<template>
    <div class="content">


        <n-space vertical>
            <div class="card">
                <n-h4 prefix="bar">
                    其他信息
                </n-h4>

                <div class="infoBox">
                    <div>软件版本：{{ toolStore.appv }} <n-button size="tiny" type="success" round @click="checkAppv">检查更新</n-button></div>
                    <div>作者：Yoyo QQ: <i>1294858802</i>（接我的世界llse插件、软件、手机App、H5网页、小程序等开发！）</div>

                    <div>
                        <span class="title">加入官方QQ群：<i>533483733</i></span>
                        <a target="_blank"
                            href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YJ244_fz4m54RIzGjAISoAlibosxuHoy&authKey=RBtqNbvhyD5ayQAw3b%2BNRTcK5wSpMO5tDcwv0JyjbDwa7q%2BJwHSTUyba0yNOektR&noverify=0&group_code=533483733">点击加入群聊【方块派对】</a>
                    </div>
                    <div>
                        资源包缓存: <n-button size="tiny" type="success" round @click="openDir">打开目录</n-button>
                    </div>
                </div>
            </div>

            <div class="card">
                <n-h4 prefix="bar">
                    软件设置
                </n-h4>
                <n-form ref="formRef" :model="dynamicForm">
                    <n-form-item label="项目目录（用于存放服务器，你可以把你有的复制到这里！）" path="directory" :rule="{
                        required: true,
                        message: '请输入正确的项目目录',
                        trigger: ['input', 'blur']
                    }">
                        <n-input-group>
                            <n-input v-model:value="dynamicForm.directory" placeholder="请输入项目目录" clearable>
                                <template #prefix>
                                    <i class="iconfont icon-ziyuan"></i>
                                </template>
                            </n-input>
                            <n-button type="primary" @click="checkmark">
                                选择目录
                            </n-button>
                        </n-input-group>

                    </n-form-item>

                    <n-form-item label="软件开机自启" path="powerBoot" :rule="{
                        required: true
                    }">
                        <n-switch v-model:value="dynamicForm.powerBoot">
                            <template #checked>
                                已打开软件开机自启
                            </template>
                            <template #unchecked>
                                已关闭软件开机自启
                            </template>
                        </n-switch>
                    </n-form-item>

                </n-form>

                <div class="save-box">
                    <n-button type="primary" :disabled="!dynamicForm.directory" @click="saveInfo">
                        保存
                    </n-button>
                </div>
            </div>

        </n-space>

    </div>
</template>
  
  
<script setup>
import { defineComponent, reactive, ref, toRaw, onMounted } from "vue";
import { useMainStore } from "@renderer/store/index";
import { useRouter } from 'vue-router';
import { useMessage, useDialog } from "naive-ui";
import { getAppv } from '@renderer/assets/common/api';
const dialog = useDialog();

import { useToolStore } from '../../store';
const toolStore = useToolStore();

const message = useMessage();

const formRef = ref(null);
const dynamicForm = reactive(toRaw(toolStore.setting));


const handleValidateClick = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
            console.log("验证通过");
        } else {
            console.log(errors);
        }
    });
};

/**
 * 保存信息
 */
function saveInfo() {
    window.api.isMkdir(dynamicForm.directory);//如果目录不存在自动创建
    window.api.initSetting(toRaw(dynamicForm));//更新配置
    toolStore.getSetting();//刷新状态库
    message.success('保存成功');
}

/**
 * 选择目录
 */
function checkmark() {
    window.api.showOpenDialog().then(result => {
        if (result.canceled) {
            // 是否已经取消选择
            return;
        }
        dynamicForm.directory = result.filePaths[0];//设置选择的目录
        handleValidateClick();
    });

}

/**
 * 监测新版本
 */
function checkAppv() {
    getAppv().then(res => {
        if (!res) return;
        if (res.appMark > toolStore.appMark) {
            // 新版本
            dialog.warning({
                title: "更新提示",
                content: res.content,
                positiveText: "更新",
                negativeText: "取消",
                onPositiveClick: () => {
                    window.api.openUrl(res.url);
                }
            });
        }else{
            message.success('已经是最新版本！');
        }
    });
}

//打开资源缓存目录
function openDir(){
    window.api.explorerCatalog('./datas/resBundle');
}


</script>
  
  
<style lang="scss" scoped>
.content {
    // background-color: red;


    .card {
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        display: flex;
        flex-direction: column;


        .save-box {
            display: flex;
            justify-content: center;

            .n-button {
                width: 100px;
                margin-top: 50px;
            }
        }

        .infoBox {
            display: flex;
            flex-direction: column;
            justify-content: center;


            .title {
                margin-right: 20px;
            }

            i {
                user-select: text;
            }
        }

    }
}
</style>